<template>
  <div class="stock">
    <el-breadcrumb :separator-icon="ArrowRight">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
      <!-- <el-breadcrumb-item >库存管理</el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/index/stock' }"
        >库存总览</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/mo-search' }"
        >库存查询</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/amend' }"
        >库存更改</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/addmounted' }"
        >新增商品库存</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/index/hint' }"
        >急需补货提示</el-breadcrumb-item
      >
    </el-breadcrumb>

    <!-- 标题 -->
    <h3 class="h3">商品货物库存总览</h3>
    <!-- 输入框 -->
    <div class="box">
      <el-input class="inps" v-model="input"  placeholder="请输入你想查找的商品id"
      @click="tiao"
      />
      <el-button type="primary" @click="goo" round>新增商品</el-button>
    </div>
    <img class="icon" src="https://iconfont.alicdn.com/p/illus/preview_image/zbZJiGxhKcGy/facbc48c-5f4b-491f-b022-7de39c3bcfef.png" alt="">
    
    
    <!-- 提示框 -->
    <!-- <el-alert title="success alert" type="success" center show-icon /> -->
    <!-- 商品列表 -->
    <el-card>
      <el-table :data="state.tableData" style="width: 100%">
      <el-table-column fixed prop="goodsid" label="商品id" width="150" />
      <el-table-column prop="goodsname" label="商品名" width="150" />
      <el-table-column prop="goodspreon" label="商品价格" width="120" />
      <el-table-column prop="goodsamount" label="商品库存" width="120" />
      <el-table-column prop="maxamount" label="最大库存" width="120" />
      <el-table-column prop="replenish" label="应补货量" width="120" />
      <el-table-column fixed="right" label="数据操作" width="200">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(scope.row)"
            >编辑</el-button
          >
          <el-button :plain="true" @click="deleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    </el-card>
    
    <!-- 分页部分 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      :page-sizes="state.pageSizes"
      @size-change="sizeChange"
      @current-change="changePage"
    />
  </div>
</template>

<script setup>
import { user_amount,user_modelete,user_amend} from '../../utils/api'
import { computed, onMounted, reactive, ref } from "vue";
import axios from "axios";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
// input输入框

var input = ref("");
var $router = useRouter();
// 点击输入框跳转到搜索页面
var tiao = function () {
  $router.push("/index/mo-search");
  // console.log("跳")
};

// 创建响应式数据
const state = ref({
  tableData: [],
  total: 0,
  pageSize: 10,
  currentPage: 1,
  pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
});

var goodslistData = ref({ list: [] });

//  编剧数据
var handleClick = (row) => {
  $router.push({ path: "/index/amend", query: row });
};

// 删除数据
var deleteRow = (row) => {
  user_modelete( { id: row.goodsid }).then((res) => {
    // console.log('delete',res.data);
    // state.value.tableData = res.data.list;
    goodslist();
    ElMessage({
      message: "删除成功。",
      type: "success",
    });
  });
};

// 在组件挂载时就去发请求，
// onMounted(()=>{
//   axios.post('/api/user/amount').then((res)=>{
//     // console.log(res.data.list)
//     tableData.list = res.data.list;
//     // 计算应补货量
//     tableData.list.forEach((item)=>{
//       item.replenish = item.maxamount - item.goodsamount;
//     })
//   });
// })
// 在挂载期发请求 获取所有的商品库存信息；
onMounted(() => {
  goodslist();
});
const goodslist = () => {
  user_amount().then((res) => {
    goodslistData.value.list = res.data.list;

    goodslistpage();
  });
};
const goodslistpage = () => {
  state.value.tableData = goodslistData.value.list.slice(
    (state.value.currentPage - 1) * state.value.pageSize,
    state.value.currentPage * state.value.pageSize
  );
  state.value.total = goodslistData.value.list.length;
  // 计算应补货量
  state.value.tableData.forEach((item) => {
    item.replenish = item.maxamount - item.goodsamount;
    // console.log( item.replenish)
  });
};
const changePage = (val) => {
  console.log("翻页，当前为第几页", val);
  state.value.currentPage = val;
  goodslist();
};
const sizeChange = (val) => {
  console.log("改变每页多少条，当前一页多少条数据", val);
  state.value.pageSize = val;
  state.value.currentPage = 1;
  goodslist();
};

// 跳转到新增页面
var goo = () => {
  $router.push("/index/addmounted");
};
</script>

<style scoped >
.stock{
  position: relative;
}
.h3{
  margin-top: 25px;
}
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}
/* 图 */
.icon{
  position: absolute;
  top: 50px;
  right: 550px;
  width: 100px;
  height: 100px; 
}

.el-button {
  margin-left: 20px;
}
.inps{
  width: 500px;
  margin: 20px, 0;
}
.box{
  margin:25px 0 20px 0;
}
</style>